<template>
  <div class="data-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="articles-container">
          <h4>文章量：</h4>
          <div class="numContainer">
            <h1 class="articleCount">{{ articleCount }}</h1>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="comments-container">
          <h4>评论量：</h4>
          <div class="numContainer">
            <h1 class="commentCount">{{ commentCount }}</h1>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="users-container">
          <h4>用户量：</h4>
          <div class="numContainer">
            <h1 class="userCount">{{ userCount }}</h1>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="charts-container">
    <el-row>
      <el-col :span="8">
        <div class="articles-chart-container" ref="articlesChartContainer">
        </div>
      </el-col>
      <el-col :span="8">
        <div class="comments-chart-container" ref="commentsChartContainer">
        </div>
      </el-col>
      <el-col :span="8">
        <div class="users-chart-container" ref="usersChartContainer">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getCurrentInstance } from 'vue';
export default {
  name: "",
  data() {
    return {
      proxy: getCurrentInstance().proxy,
      articleCount: '',
      commentCount: '',
      userCount: '',
      newArticleCount: '',
      newCommentCount: '',
      newUserCount: '',
      articlesChartContainer: null,
      articlesChartInstance:null,
      commentsChartContainer: null,
      commentsChartInstance:null,
      usersChartContainer: null,
      usersChartInstance:null,
    }
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    //渲染饼状图
    getArticlesCharts() {
      const chartDom = this.$refs.articlesChartContainer
      this.articlesChartInstance = echarts.init(chartDom);
      const option = {
        series: [
          {
            type: 'pie',
            data: [
              {
                value: this.articleCount - this.newArticleCount,
                name: "已有文章数量"
              },
              {
                value: this.newArticleCount,
                name: '本周新增文章数量'
              },
            ],
          },
        ],
      };
      // option && myChart.setOption(option);
      this.articlesChartInstance.setOption(option);
      window.addEventListener('resize', () => {
        this.articlesChartInstance.resize();
      });
    },
    getCommentsCharts() {
      const chartDom = this.$refs.commentsChartContainer
      this.commentsChartInstance = echarts.init(chartDom);
      const option = {
        series: [
          {
            type: 'pie',
            data: [
              {
                value: this.commentCount - this.newCommentCount,
                name: "已有评论数量"
              },
              {
                value: this.newCommentCount,
                name: '本周新增评论数量'
              },
            ],
          },
        ],
      };
      // option && myChart.setOption(option);
      this.commentsChartInstance.setOption(option);
      window.addEventListener('resize', () => {
        this.commentsChartInstance.resize();
      });
    },
    getUsersCharts() {
      const chartDom = this.$refs.usersChartContainer
      this.usersChartInstance = echarts.init(chartDom);
      const option = {
        series: [
          {
            type: 'pie',
            data: [
              {
                value: this.userCount - this.newUserCount,
                name: "已有用户数量"
              },
              {
                value: this.newUserCount,
                name: '本周新增用户数量'
              },
            ],
          },
        ],
      };
      // option && myChart.setOption(option);
      this.usersChartInstance.setOption(option);
      window.addEventListener('resize', () => {
        this.usersChartInstance.resize();
      });
    },
    
    async fetchData() {
      try {
        let result = await this.proxy.Request({
          url: "/dashboard/1",
          method: "get",
        });
        if (!result.data){
          return;
        }
        this.articleCount = result.data.articleCount;
        this.commentCount = result.data.commentCount;
        this.userCount = result.data.userCount;
        this.newArticleCount = result.data.newArticleCount;
        this.newCommentCount = result.data.newCommentCount;
        this.newUserCount = result.data.newUserCount;
      } catch(error){
        console.error("获取数据时出错：",error)
      }
      this.getArticlesCharts();
      this.getCommentsCharts();
      this.getUsersCharts();
    }
  }
}
</script>

<style lang="scss" scoped>
.articles-container {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  background-color: #f5f5f5;
}

.comments-container {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  background-color: #f5f5f5;
}

.users-container {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  background-color: #f5f5f5;
}

.articleCount {
  color: rgb(163, 198, 228);
}

.commentCount {
  color: rgb(163, 198, 228);
}

.userCount {
  color: rgb(163, 198, 228);
}

.numContainer {
  display: flex;
  justify-content: center;
  align-items: right;
  height: 100px;
}
.charts-container{
  height: 600px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f5f5f5;
}

.articles-chart-container {
  height: 500px;
  height: 300px;
}
.comments-chart-container {
  height: 500px;
  height: 300px;
}
.users-chart-container {
  height: 500px;
  height: 300px;
}
</style>